
/*
  react-router-dom v6的跳转有两种方式
  1、使用<Link>标签方式路由跳转
  2、编程式的路由方式，利用了useNavagiate这个hook来实现,使用步骤如下
  1）导入useNavigate
  import {useNavigate} from 'react-router-dom'
  2) 在函数组件中调用useNavigate
  const nav=useNavigate()
  3) 进行跳转
  nav("/register")
*/
// export default function Login() {
//   const nav=useNavigate()
//   return (
//     <div>
//       <h1>登录</h1>
//       <Link to={"/register"}>没有账户,请注册</Link><br/>
//       <a href="#" onClick={(e)=>{
//          e.preventDefault()
//          nav("/register",{replace:true})
//       }}>没有账户，请注册</a>
//     </div>
//   )
// }

import React,{useState} from 'react'
import $http from '../api/http'
import {useNavigate} from 'react-router-dom'

export default function Login() {
  const [account,setAccount]=useState("Giles")
  const [password,setPassword]=useState("123456")
  const nav=useNavigate()
  const login=async()=>{
    const {data:{code,data:{userInfo,token}}}=await $http.users.login({account,password})
    if(code){
      //将用户的信息和token的信息保存到localStorage中
      localStorage.setItem("token",token)
      localStorage.setItem("userInfo",JSON.stringify(userInfo))
      nav("/",{replace:true})
    }
  }
  return (
    <div>
        <h1>登录</h1>
        <div>
            <label htmlFor="account">账户:</label>
            <input type="text" id='account' value={account} onChange={e=>setAccount(e.target.value)}/>
        </div>
        <div>
            <label htmlFor="password">密码:</label>
            <input type="password" id='password' value={password} onChange={e=>setPassword(e.target.value)}/>
        </div>
        <div>
            <button onClick={login}>登录</button>
        </div>
    </div>
  )
}
